<template>
	<div>
		<CommonSearch v-model="tableConfig.searchParams" :config="searchConfig"></CommonSearch>
		<CommonTable :config="tableConfig" ref="commonTable">
			<template #status="{ row }">
				<el-tooltip :content="`状态:${row.status == 1 ? '上架' : '下架'}`" placement="top">
					<el-switch
						@click="handlerStatus(row)"
						:value="row.status"
						active-color="#13ce66"
						inactive-color="#dcdfe6"
						active-value="1"
						inactive-value="0"
					></el-switch>
				</el-tooltip>
			</template>
		</CommonTable>
	</div>
</template>

<script lang="javascript">
	import { reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
	import { CREATE, UPDATE, DELETE, QUERY, DECORATION } from '@/utils/Const';
	import { useFactoryRouter } from '@/hooks/useFactoryRouter';
	import {
		getShopDecorationListApi,
		createShopDecorationApi,
		updateShopDecorationApi,
		deleteShopDecorationApi
	} from '@/api/shopDecoration.api';
	export default {
		name : 'H5ShopDecoration',
		setup () {
			let Instance = getCurrentInstance().proxy;
			let commonTable = null;
			let { router } = useFactoryRouter();
			let data = reactive({
				searchConfig : {
					handlerSearch () {
						return commonTable.fetchData({ isResetPageNumber : true });
					},
					form : [
						{
							type : 'text',
							label : '类型:',
							defaultValue : '1',
							hide : true,
							key : 'ismobile'
						},
						{
							type : 'text',
							label : '页面名称:',
							placeholder : '请输入页面名称',
							key : 'pageName'
						},
						{
							type : 'text',
							label : '页面编码:',
							placeholder : '请输入页面编码',
							key : 'pageCode'
						},
						{
							type : 'select',
							label : '状态:',
							placeholder : '请选择状态',
							key : 'status',
							options : [
								{
									value : '',
									label : '全部'
								},
								{
									value : '1',
									label : '上架'
								},
								{
									value : '0',
									label : '下架'
								}
							]
						}
					]
				},
				tableConfig : {
					searchParams : {},
					operateWidth : 170,
					reqApiMethod : getShopDecorationListApi,
					handlerOperate : (payload, row) => {
						data.formConfig.type = payload.butType;
						let formConfig = {
							data : Array.isArray(row) ? row[0] : '',
							...data.formConfig
						};

						let names = [];
						let ids = [];
						switch (payload.butType) {
						case CREATE:
							Instance.$hyDialogForm(data.formConfig);
							break;
						case DELETE:
							row.forEach((item) => {
								names.push(item.pageName);
								ids.push(item.pageCode);
							});
							Instance.$hyConfirm({
								subTitle : `是否确定删除【${names.join()}】`,
								callback : async (done) => {
									await deleteShopDecorationApi({
										ids : ids.join(),
										ismobile : 1
									});
									done();
									commonTable.fetchData();
								}
							});
							break;
						case UPDATE:
							Instance.$hyDialogForm(formConfig);
							break;
						case QUERY:
							formConfig.disabled = true;
							Instance.$hyDialogForm(formConfig);
							break;
						case DECORATION:
							router.push(`h5ShopDecorationEdit/${row[0].pageCode}`);
							break;
						}
					},
					mergeTable : () => {},
					columns : [
						{
							type : 'index'
						},
						{
							type : 'selection'
						},
						{
							title : '页面名称',
							field : 'pageName'
						},
						{
							title : '页面编码',
							field : 'pageCode'
						},
						{
							title : '状态',
							field : 'status',
							formatter : (value) => {
								if (Number(value) === 0) {
									return '下架';
								}
								return '上架';
							}
						},
						{
							title : '操作时间',
							field : 'updateTime'
						}
					],
					globalOperate : [
						{
							butType : CREATE,
							name : '新增',
							color : 'primary',
							role : [],
							icon : 'el-icon-plus'
						},
						{
							butType : DELETE,
							name : '删除',
							enable : '2',
							color : 'danger',
							role : [],
							icon : 'el-icon-delete'
						},
						{
							butType : UPDATE,
							name : '修改',
							enable : '1',
							color : 'success',
							role : [],
							icon : 'el-icon-edit'
						},
						{
							butType : QUERY,
							name : '查看',
							enable : '1',
							color : 'warning',
							role : [],
							icon : 'el-icon-edit'
						}
					],
					operate : [
						// {
						// 	butType : DECORATION,
						// 	type : 'text',
						// 	name : '装修',
						// 	role : [],
						// 	icon : 'el-icon-goods'
						// },
						{
							butType : UPDATE,
							type : 'text',
							name : '修改',
							role : [],
							icon : 'el-icon-edit'
						},
						{
							butType : DELETE,
							type : 'text',
							name : '删除',
							role : [],
							icon : 'el-icon-delete'
						}
					]
				},
				formConfig : {
					type : '',
					async handlerSubmit (params) {
						switch (data.formConfig.type) {
						case CREATE:
							await createShopDecorationApi(params);
							break;
						case UPDATE:
							await updateShopDecorationApi(params);
							break;
						}
						return commonTable.fetchData();
					},
					form : [
						{
							type : 'text',
							label : '类型:',
							defaultValue : '1',
							hide : true,
							key : 'ismobile'
						},
						{
							type : 'text',
							label : '页面Id',
							key : 'pageCode',
							hide : true
						},
						{
							type : 'text',
							label : '页面名称:',
							placeholder : '请输入页面名称',
							maxlength : 10,
							key : 'pageName',
							rules : [
								{ required : true, message : '请输入页面名称', trigger : 'blur' }
							]
						},
						{
							type : 'radio',
							label : '状态:',
							key : 'status',
							defaultValue : '1',
							options : [
								{
									value : '1',
									label : '上架'
								},
								{
									value : '0',
									label : '下架'
								}
							]
						},
						{
							type : 'textarea',
							label : '备注:',
							placeholder : '请输入内容',
							key : 'remark',
							maxlength : 100
						}
					]
				}
			});

			const handlerStatus = (row) => {
				let { status, pageName, pageCode } = row;
				Instance.$hyConfirm({
					subTitle : `是否${status == 0 ? '上架' : '下架'}【${pageName}】`,
					callback : async (done) => {
						await deleteShopDecorationApi({
							ismobile : 1,
							pageCode,
							status : status == 0 ? 1 : 0
						});
						row.status = !status;
						commonTable.fetchData();
						done();
					}
				});
			};

			onMounted(() => {
				commonTable = Instance.$refs['commonTable'];
			});
			return {
				handlerStatus,
				...toRefs(data)
			};
		}
	};
</script>

<style lang="scss" scoped></style>
